import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'

import { RecommendWrapper } from './style'
import Banner from '../../c-cpns/banner/TopBanner'
import HotRecommend from '../../c-cpns/HotRecommend'
import NewAlbum from '../../c-cpns/NewAlbum'
import Ranking from '../../c-cpns/TopRanking'
import UserLogin from '../../c-cpns/UserLogin'
import SettleSinger from '../../c-cpns/SettleSinger/SettleSinger'
import HotSinger from '../../c-cpns/hotDj/HotDj'

interface IProps {
  children?: ReactNode
}

const Recommend: FC<IProps> = () => {
  return (
    <RecommendWrapper>
      {/* 顶部轮播图 */}
      <Banner></Banner>
      {/* 主内容部分 */}
      <div className="main_content wrap-v2">
        <div className='left'>
          {/* 推荐(热门)歌单 */}
          <HotRecommend></HotRecommend>
          {/*  新碟上架 */}
          <NewAlbum></NewAlbum>
          {/* 榜单 */}
          <Ranking></Ranking>
        </div>
        <div className='right'>
          {/* VIP 和用户登录 */}
          <UserLogin></UserLogin>
          {/* 入住歌手 */}
          <SettleSinger></SettleSinger>
          {/* 申请成为网易音乐人 */}
          <div className='apply_singer'>
            <a className='btn sprite_button'>
              <i className='btn_i sprite_button'>申请成为网易音乐人</i>
            </a>
          </div>
          {/* 热门主播  */}
          <HotSinger></HotSinger>
        </div>
      </div>
    </RecommendWrapper>
  )
}

export default memo(Recommend)
